<template>
  <text
    class="ui-icon"
    :class="[type,name , className]"
    :style="{ color: color, 'font-size': size + 'rpx' , 'line-height' :size + 'rpx'  }"
    @click="_onClick"
  ></text>
</template>

<script>
export default {
  name: "ui-icon",
  externalClasses: ["ui-icon"],
  options: {
    styleIsolation: "apply-shared"
  },
  props: {
    type: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    size: {
      type: [Number, String],
      default: 28
    },
    className: String
  },
  methods: {
    _onClick(event) {
      this.$emit("click", event);
    }
  }
};
</script>

<style lang="scss">
uni-icon {
  line-height: 1;
}

.ui-icon {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  line-height: inherit;

  &.iconfont {
    font-family: "iconfont";
  }
}

.ui-icon.ui-active {
  color: $brand-primary;
}
</style>
